<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小钱兜-个人用户</title>
        <!--常规化样式-->
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="sass/index.css">
        <link rel="stylesheet" href="sass/index1.css">
        <!--引用字体图标-->
        <style>
            @font-face {
                font-family: 'icomoon';
                src:  url('fonts/icomoon.eot?snsrp8');
                src:  url('fonts/icomoon.eot?snsrp8#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?snsrp8') format('truetype'),
                url('/fonts/icomoon.woff?snsrp8') format('woff'),
                url('/fonts/icomoon.svg?snsrp8#icomoon') format('svg');
                font-weight: normal;
                font-style: normal;
            }
        </style>
        <!--加载动画-->
        <style>
            .ant-spin-dot {
                position: relative;
                display: inline-block;
                font-size: 20px;
                width: 20px;
                height: 20px;
            }
            .ant-spin-dot-spin{
                transform: rotate(45deg);
                animation: antRotate 1.2s infinite linear;
            }

            .ant-spin-dot i {
                width: 9px;
                height: 9px;
                border-radius: 100%;
                background-color: #1890ff;
                transform: scale(0.75);
                display: block;
                position: absolute;
                opacity: 0.3;
                animation: antSpinMove 1s infinite linear alternate;
                transform-origin: 50% 50%;

            }
            .ant-spin-dot i:nth-child(1) {
                left: 0;
                top: 0;
            }
            .ant-spin-dot i:nth-child(2) {
                right: 0;
                top: 0;
                animation-delay: 0.5s;
            }
            .ant-spin-dot i:nth-child(3) {
                right: 0;
                bottom: 0;
                animation-delay: 1.0s;
            }
            .ant-spin-dot i:nth-child(4) {
                left: 0;
                bottom: 0;
                animation-delay: 1.5s;
            }
            @keyframes antSpinMove {
                to {
                    opacity: 1;
                }
            }
            @keyframes antRotate {
                to {
                    transform: rotate(405deg);
                }
            }
        </style>
        <style>
            body{
                background: url(image/birthday-celebration-gift-packaging-45238.jpg) no-repeat;
                background-size: 100%;
            }
        </style>
    </head>
    <body>

        <div class="main">

            <div class="header">
                <div class="nav">个人支付中心</div>
            </div>
            <div class="container">
                <div class="inner">
                    <div class="topic"><h1>你想要的触手可及</h1></div>
                    <div class="entrance">
                        <button class="submit" id="inquire-btr">查询</button>
                        <button class="submit" id="prepayment-btr">支付</button>
                    </div>
                </div>
            </div>

            <!--个人登录-->
            <div class="login" style="display:none;">
                <div class="lg-inner">

                    <div class="lg-header">个人登录</div>
                    <div>
                        <div class="wrap">
                            <input type="text" placeholder="请输入用户名">
                        </div>
                        <div class="wrap">
                            <input type="text" placeholder="请输入密码">
                        </div>
                    </div>
                    <div>
                        <button class="lg-Btr">登录</button>
                    </div>
                    <div class="cancel"><i></i></div>
                </div>
            </div>
            <!--个人注册-->
            <div class="register" style="display:none;">
                <div class="rg-inner">
                    <div class="rg-header">个人注册</div>
                    <div class="wrap">
                        <label>手机号</label>
                        <input type="text" placeholder="请输入你的手机号">
                        <div class="msg"><span><em></em></span>请输入你的手机号</div>
                    </div>
                    <div class="wrap">
                        <label>验证码</label>
                        <input type="text" placeholder="请输入你的验证码" style="width:24%; margin-right: 2%;">
                        <input type="text" placeholder="WASD" disabled="disabled" style="width:24%; text-align:center;">
                        <div class="msg"><span><em></em></span>请输入你的验证码</div>
                    </div>
                    <div class="wrap">
                        <label>密码</label>
                        <input type="text" placeholder="请输入密码">
                        <div class="msg"><span><em></em></span>请输入密码</div>
                    </div>
                    <div>
                        <button class="rg-Btr">注册</button>
                    </div>
                    <div class="cancel"><i></i></div>
                </div>
            </div>
            <!--mask-->
            <div class="mask" style="display:none;"></div>
            <!--预支付-->
            <div class="prepayment" style="display:none;" >
                <div class="register" id="rg1">
                    <div class="rg-inner">
                        <div class="rg-header">个人支付</div>
                        <div class="wrap">
                            <label>手机号</label>
                            <input type="text" name="mobileNo" placeholder="请输入你的手机号">
                            <div class="msg1"><span><em></em></span><div name="msg1"></div></div>
                        </div>
                        <!--<div class="wrap">-->
                            <!--<label>密码</label>-->
                            <!--<input type="password" name="accessPassword" placeholder="请输入你的密码">-->
                            <!--<div class="msg2"><span><em></em></span><div name="msg2"></div></div>-->
                        <!--</div>-->
                        <div class="wrap">
                            <label>邮箱</label>
                            <input type="text" name="merchantMail" placeholder="请输入邮箱">
                            <div class="msg2"><span><em></em></span><div name="msg2"></div></div>
                        </div>
                        <div class="wrap">
                            <label>商户ID</label>
                            <select class="merchantId-drop">

                            </select>
                            <!--<input type="text" name="merchantId" placeholder="请输入商户ID-查看注册回执邮件">-->
                            <div class="msg4"><span><em></em></span><div name="msg4"></div></div>
                        </div>
                        <div class="wrap">
                            <label>验证码</label>
                            <input type="text" name="mailCode" placeholder="请输入你的验证码" style="width:24%; margin-right: 2%;">
                            <input type="button" name="getCode" value="点击获取验证码" style="width:24%; text-align:center;background-color: #c8f0ff;cursor:pointer;">
                            <div class="msg3"><span><em></em></span><div name="msg3"></div></div>
                        </div>

                        <!--<div class="wrap">-->
                            <!--<label>用户ID</label>-->
                            <!--<input type="text" name="userId" placeholder="请输入用户Id">-->
                            <!--<div class="msg4"><span><em></em></span><div name="msg4"></div></div>-->
                        <!--</div>-->
                        <!--<div class="wrap">-->
                            <!--<label>订单号</label>-->
                            <!--<input type="text" name="outOrderId" placeholder="请输入订单号">-->
                            <!--<div class="msg5"><span><em></em></span><div name="msg5"></div></div>-->
                        <!--</div>-->
                        <div>
                            <button class="rg-Btr" id="rg-Btr1">下一步</button>
                        </div>
                        <div class="cancel"><i></i></div>
                    </div>
                </div>
                <div class="register" style="display:none;" id="rg2">
                    <div class="rg-inner">
                        <div class="rg-header">个人支付</div>
                        <div class="wrap">
                            <label>姓名</label>
                            <input type="text" name="principalName" placeholder="请输入你的姓名">
                            <div class="msg1" ><span><em></em></span><div name="msg1"></div></div>
                        </div>
                        <div class="wrap">
                            <label>身份证号</label>
                            <input type="text" name="idCardNumber" placeholder="请输入身份证号">
                            <div class="msg2"><span><em></em></span><div name="msg2"></div></div>
                        </div>
                        <div>
                            <button class="rg-Btr" id="rg-Btr2">下一步</button>
                        </div>
                        <div class="cancel"><i></i></div>
                    </div>
                </div>
                <div class="register" style="display:none;" id="rg3">
                    <div class="rg-inner">
                        <div class="rg-header">个人支付</div>
                        <div class="wrap first-key">
                            <img alt="" src="" style="width: 220px;height:100%;" name="IdCardFront">
                            <input type="file" name="IdCardFront" accept="img/*" style="width:195px;" onchange="filefujianChange(this)">
                            <label>身份证正面</label>
                            <div class="msg1"><span><em></em></span><div name="msg1"></div></div>

                        </div>

                        <div class="wrap first-key">
                            <img alt="" src="" style="width: 220px;height:100%;" name="IdCardNegative">
                            <input type="file" name="IdCardNegative" accept="img/*" style="width:195px;" onchange="filefujianChange(this)">
                            <label>身份证反面</label>
                            <div class="msg2"><span><em></em></span><div name="msg2"></div></div>
                        </div>
                        <div>
                            <button class="rg-Btr" id="rg-Btr3">下一步</button>
                        </div>
                        <div class="cancel"><i></i></div>
                    </div>
                </div>
                <div class="register" style="display:none;" id="rg4">
                    <div class="rg-inner">
                        <div class="rg-header">个人支付</div>
                        <div class="wrap">
                            <label>银行卡号</label>
                            <input type="text" name="bankCardNo" placeholder="请输入银行卡号">
                            <div class="msg1"><span><em></em></span><div name="msg1"></div></div>

                        </div>
                        <div class="wrap">
                            <label>归属银行</label>
                            <input type="text" name="bankName" placeholder="归属银行" disabled="disabled">
                            <!--<div class="msg"><span><em></em></span>请输入身份证号</div>-->
                        </div>
                        <div>
                            <button class="rg-Btr" id="rg-Btr4">下一步</button>
                        </div>
                        <div class="cancel"><i></i></div>
                    </div>
                </div>
                <div class="register" style="display:none;" id="rg5">
                    <div class="rg-inner">
                        <div class="rg-header">个人支付</div>
                        <div class="wrap">
                            <label>金额</label>
                            <input type="text" name="amount" placeholder="请输入支付金额">
                            <div class="msg1"><span><em></em></span><div name="msg1"></div></div>
                        </div>
                        <div>
                            <button class="rg-Btr" id="rg-Btr5">支付</button>
                        </div>
                        <div class="cancel"><i></i></div>
                        <div class="loading"></div>
                    </div>
                </div>
                <div class="register" style="display:none;" id="rg6">
                    <div class="rg-inner">
                        <div class="rg-header">个人支付</div>
                        <div class="wrap">
                            <div class="pay-msg"></div>
                            <label>邮箱验证码</label>
                            <input type="text" name="mailCodePay" placeholder="请输入邮箱订单验证码">
                            <div class="msg1"><span><em></em></span><div name="msg1"></div></div>
                        </div>
                        <button class="submit" id="confirmPay">确认支付</button>
                        <button class="submit" id="cancelPay">取消支付</button>
                    </div>
                </div>
            </div>
            <!--查询页-->
            <div class="inquire" style="display: none">
                <div class="header">
                    <div class="nav">个人支付中心</div>
                </div>
                <div class="inquire-nav">
                    <ul class="fn-clear">
                        <li class="cancel-before"><a href="###">返回上一页</a></li>
                        <li class="order-status-btr"><a href="###">查询订单状态</a></li>
                        <li class="card-bin-btr"><a href="###">查询卡bin信息</a></li>
                        <li class="bank-list-btr"><a href="###">查询支持银行</a></li>
                        <li class="merchant-list-btr"><a href="###">查询商户信息</a></li>
                    </ul>
                </div>
                <div class="inquire-table">
                    <div class="order-status" style="display: none">
                        <div class="order-input">
                            <input type="text" placeholder="请输入手机号" name="mobileNo">
                            <input type="text" placeholder="请输入邮箱" name="merchantMail">
                            <input type="text" placeholder="请输入商户号" name="merchantId">
                            <input type="text" placeholder="请输入订单号" name="outOrderId">
                            <button type="button" class="submit" id="inquire-order-btr">查询</button>
                        </div>
                        <div class="order-detail">

                        </div>
                    </div>
                    <div class="card-bin" style="display: none">
                        <div class="card-input">
                            <input type="text" placeholder="请输入手机号" name="mobileNo">
                            <input type="text" placeholder="请输入邮箱" name="merchantMail">
                            <input type="text" placeholder="请输入商户号" name="merchantId">
                            <input type="text" placeholder="银行卡号" name="bankCardNo">
                            <button type="button" class="submit" id="inquire-card-btr">查询</button>
                        </div>
                        <div class="card-bin-detail">

                        </div>
                    </div>
                    <div class="bank-list" style="display: none">
                        <div class="bank-input">
                            <button type="button" class="submit" id="inquire-bank-btr">查询</button>
                        </div>
                        <div class="bank-list-detail">

                        </div>
                    </div>
                    <div class="merchant-list" style="display: none">
                        <div class="merchant-input">
                            <button type="button" class="submit" id="inquire-merchant-btr">查询</button>
                        </div>
                        <div class="merchant-list-detail">

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="js/jquery.js"></script>

        <script src="js/function.js"></script>
        <script src="js/logic.js"></script>
        <script src="js/bankCard-Name.js"></script>
        <script src="js/checkInput-prepayment.js"></script>
        <script src="js/checkFunction.js"></script>
        <script src="js/img-b64.js"></script>
        <script src="js/jsencrypt.js"></script>

    </body>
</html>